<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="../common/common-head.jsp"%>
<body>
<!-- begin #page-container -->
    <!-- begin #content -->
    <div id="content" class="content">

        <%@include file="../common/common-breadcrumb-add.jsp" %>

        <!-- begin row -->
        <div class="row">
            <!-- begin col-6 -->
            <div class="col-xl-8">
                <!-- begin panel -->
                <div class="panel panel-inverse" data-sortable-id="form-stuff-1">
                    <!-- begin panel-heading -->
                    <div class="panel-heading">
                        <h4 class="panel-title" >${editObj!=null?'编辑广告':'新增广告'}</h4>
                        <div class="panel-heading-btn">
                            <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
                            <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success" data-click="panel-reload"><i class="fa fa-redo"></i></a>
                            <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a>
                            <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger" data-click="panel-remove"><i class="fa fa-times"></i></a>
                        </div>
                    </div>
                    <!-- end panel-heading -->
                    <!-- begin panel-body -->
                    <div class="panel-body">
                        <form>
                            <input type="hidden" value="${editObj!=null?editObj.id:''}" id="id">
                            <div class="form-group row m-b-15">
                                <label class="col-form-label col-md-3">广告名称</label>
                                <div class="col-md-9">
                                    <input type="email" class="form-control m-b-5" placeholder="广告名称" name="name" id="name"
                                           value="${editObj!=null?editObj.name:''}" />
                                    <small class="f-s-12 text-grey-darker" style="display: none">广告名称.</small>
                                </div>
                            </div>
                            <div class="form-group row m-b-15">
                                <label class="col-form-label col-md-3">广告地址</label>
                                <div class="col-md-9">
                                    <input type="email" class="form-control m-b-5" placeholder="广告地址" name="url" id="url"
                                           value="${editObj!=null?editObj.url:''}" />
                                    <small class="f-s-12 text-grey-darker" style="display: none">广告地址.</small>
                                </div>
                            </div>
                            <div class="form-group row m-b-15">
                                <label class="col-form-label col-md-3">宽度</label>
                                <div class="col-md-9">
                                    <input type="email" class="form-control m-b-5" placeholder="宽度" name="width" id="width"
                                           value="${editObj!=null?editObj.width:''}" />
                                    <small class="f-s-12 text-grey-darker" style="display: none">宽度.</small>
                                </div>
                            </div>
                            <div class="form-group row m-b-15">
                                <label class="col-form-label col-md-3">高度</label>
                                <div class="col-md-9">
                                    <input type="email" class="form-control m-b-5" placeholder="高度" name="height" id="height"
                                           value="${editObj!=null?editObj.height:''}" />
                                    <small class="f-s-12 text-grey-darker" style="display: none">高度.</small>
                                </div>
                            </div>
                            <div class="form-group row m-b-15">
                                <label class="col-form-label col-md-3">广告图片列表</label>
                                <div class="col-md-9">
                                    <input type="file" name="file" id="file1" style="display: none" onchange="uploadFile(1)">
                                    <input type="file" name="file" id="file2" style="display: none" onchange="uploadFile(2)">
                                    <input type="file" name="file" id="file3" style="display: none" onchange="uploadFile(3)">
                                    <input type="file" name="file" id="file4" style="display: none" onchange="uploadFile(4)">
                                    <input type="file" name="file" id="file5" style="display: none" onchange="uploadFile(5)">

                                    <input type="hidden" name="photo" id="photo">

                                    <%-- 新增 --%>
                                    <c:if test="${editObj==null || editObj.photos==null || editObj.photos.size()==0}">
                                        <img src="${cdnServer}dushibao/images/advert.png" width="80px" id="advert1" onclick="openPhoto(1)">
                                        <img src="${cdnServer}dushibao/images/advert.png" width="80px" id="advert2" onclick="openPhoto(2)">
                                        <img src="${cdnServer}dushibao/images/advert.png" width="80px" id="advert3" onclick="openPhoto(3)">
                                        <img src="${cdnServer}dushibao/images/advert.png" width="80px" id="advert4" onclick="openPhoto(4)">
                                        <img src="${cdnServer}dushibao/images/advert.png" width="80px" id="advert5" onclick="openPhoto(5)">
                                    </c:if>
                                    <%-- 编辑 --%>
                                    <c:if test="${editObj!=null && editObj.photos!=null && editObj.photos.size() > 0}">
                                        <%-- 有图 --%>
                                        <c:if test="${editObj.photos!=null && editObj.photos.size()!=0}">
                                            <c:forEach items="${editObj.photos}" var="photo" varStatus="status">
                                                <img src="${cdnServer}${photo.path}" width="80px" id="advert${status.count}" onclick="openPhoto(${status.count})">
                                            </c:forEach>
                                        </c:if>

                                    </c:if>

                                    <small class="f-s-12 text-grey-darker" style="display: none">广告图片列表.</small>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-md-7 offset-md-3">
                                    <button type="button" class="btn btn-sm btn-primary m-r-5" id="saveObj">保存</button>
                                    <button type="button" class="btn btn-sm btn-default" onclick="back()">返回</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <!-- end panel-body -->

                </div>
                <!-- end panel -->

            </div>
            <!-- end col-6 -->
        </div>
        <!-- end row -->

    </div>
    <!-- end #content -->

<%@include file="../common/common-script.jsp"%>

<script>
    var ctx = '${basePath}'
    var cdnServer = '${cdnServer}'

    function back(){
        window.location.href=ctx+"advert/list"
    }

    function openPhoto(index){
        $("#file"+index).trigger("click")
    }

    function uploadFile(index){
        var formData=new FormData();
        formData.append("file",$('#file'+index).prop('files')[0]);
        $.ajax({
            type:'POST',
            url:ctx+'/upload',
            data:formData,
            contentType: false,// 注意：让jQuery不要处理数据
            processData: false,// 注意：让jQuery不要设置contentType
            dataType:'json',
            success:function (ret) {
                $("#advert"+index).attr("src",cdnServer+ret[0].path)
                var photo = $("#photo").val()

                $("#photo").val(ret[0].id + ',' + photo)

            }
        });
    }

    $(function(){

        $("#saveObj").click(function(){
            var data = {}
            data['id'] = $("#id").val()
            data['name'] = $("#name").val()
            data['url'] = $("#url").val()
            data['width'] = $("#width").val()
            data['height'] = $("#height").val()
            data['images'] = $("#photo").val()

            $.ajax({
                type:'post',
                url:ctx+'advert/add',
                data:JSON.stringify(data),
                success:function(res){
                    if(res == "1000"){
                        window.location.href=ctx+"advert/list"
                    }
                }
            })

        })
    })

</script>

</body>
</html>
